<template>
	<view class="airTemperaturebox">
		<view class="df temperatureItem" v-for="item in moreWeather.slice(0, 3)" :key="item.fxDate">
			<view class="item">{{item.relativeDate}} {{item.textDay}}</view>
			<iconCpn :weatherName="item.textDay"></iconCpn>
			<view class="item df">
				<view>{{item.tempMin}}°</view>
				<view class="progressBox"></view>
				<view>{{item.tempMax}}°</view>
			</view>
		</view>
		<view class="moreButton df" @click="toFuture">
			查看近7日天气
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import iconCpn from '@/pages/component/iconCpn.vue'
	const props = defineProps({
		moreWeather: {
			type: Array,
			required: true,
			default: () => []
		},
	})
	const toFuture = () => {
		uni.navigateTo({
			url: '/pages/futureWeather/futureWeather'
		})
	}
</script>

<style scoped lang="scss">
	.airTemperaturebox {
		width: 100%;
		color: white;
		padding: 24rpx;
		border-radius: 20rpx;
		background-color: rgba($color: #000000, $alpha: 0.2);
		box-sizing: border-box;

		.temperatureItem {
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.1);
			padding-bottom: 18rpx;
			margin-bottom: 18rpx;

			.item {
				font-size: 28rpx;
				align-items: center;
				justify-content: space-between;
				width: 33%;

				.progressBox {
					width: 100rpx;
					height: 10rpx;
					border-radius: 50rpx;
					background-image: linear-gradient(90deg, gold, red);
					margin: 0 20rpx;
				}
			}
		}

		.moreButton {
			margin-top: 40rpx;
			background-color: rgba($color: #cccccc, $alpha: 0.3);
			border-radius: 30rpx;
			padding: 30rpx;
			align-items: center;
			justify-content: center;
		}
	}
</style>